<template>
  <div class="home">
    <top-header :links="links"></top-header>
    <div class="conters">
      <div class="content">
        <el-row gutter="10" style="width:100%;margin-top:40px">
          <el-col :md="18" :lg="18" :xl="18">
            <router-view />
          </el-col>
          <el-col :md="6" :lg="6" :xl="6">
            <div class="widget">
              <h4 class="title">友情链接</h4>
              <div class="friend">
                <div class="friend-item" v-for="item in friend" :key="item._id">
                  <div @click="getOpen(item.b_link)">
                    <div class="friend-item-name">{{ item.b_name }}</div>
                    <span>{{ item.b_introduce }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="widget">
              <h4 class="title">文章推荐</h4>
              <div class="recommend-box">
                <div v-for="item in article" :key="item._id">
                  <div class="recommend-item" @click="getDetail(item.id)">
                    <span>> {{ item.title }}</span
                    ><span>{{ item.createdAt }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="widget">
              <h4 class="title">关注博主</h4>
              <div>
                <p>赶快关注我吧！</p>
                <img src="../assets/gzh.jpg" alt="" />
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="tap" v-if="this.scrollT > 500" @click="To">
      <a class="el-icon-top"></a>
    </div>
    <f-footer></f-footer>
    <!-- <el-card>
      <div v-for="item in article" :key="item._id">
        <div class="home-article" :style="`border-left:6px solid ${randomColor()}`">
          <div class="home-article-title" @click="getDetail(item._id)">{{ item.title }}</div>
          <span style="float:right;">{{ item.created_time }}</span>
          <p style="font-size:18px;">{{ item.synopsis }}</p>
          <div class="home-article-visit">
            <div>
              标签：
              <el-tag :color="randomColor()">{{ item.classId.classname }}</el-tag>
            </div>
            <div>
              <span class="el-icon-view" style="margin-right:10px">{{ item.visited}}</span><span
                class="el-icon-chat-dot-round">{{ item.accessPulish_count }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-card> -->
  </div>
</template>

<script>
import header from "../components/top-header/index.vue";
import footer from "../components/footer/footer";
export default {
  name: "Home",
  data() {
    return {
      links: [
        { path: "/home", name: "首页" },
        { path: "/class", name: "分类" },
        { path: "/about", name: "关于" },
        { path: "/gitee", name: "Gitee" },
      ],
      article: [],
      friend: [],
    };
  },
  components: {
    topHeader: header,
    FFooter: footer,
  },
  mounted() {
    this.getFriendlist();
    this.getArticlelist();
    let delay = 0.3;
    let revealText = document.querySelector(".reveal");
    let letters = revealText.textContent.split("");
    revealText.textContent = "";
    let middle = letters.filter((e) => e !== " ").length / 2;
    letters.forEach((letter, i) => {
      let span = document.createElement("span");
      span.textContent = letter;
      span.style.animationDelay = `${delay + Math.abs(i - middle) * 0.1}s`;
      revealText.append(span);
    });
    window.addEventListener("scroll", this.scrollHandle);
    this.getArticlelist();
  },
  methods: {
    // 锚点定位
    To() {
      window.scrollTo(10, 10);
    },
    // 获取页面滚动高度
    scrollHandle(e) {
      let top = e.srcElement.scrollingElement.scrollTop; // 获取页面滚动高度
      this.scrollT = top;
    },
    getArticlelist() {
      this.axios.get("/rest/article/art").then((res) => {
        this.article = res.data.items;
      });
    },
    getDetail(id) {
      this.$router.push(`/detail/${id}`);
    },
    // 获取友情链接
    getFriendlist() {
      this.axios.get(`/rest/friend`).then((res) => {
        this.friend = res.data.items;
      });
    },
    getOpen(path) {
      if (path.indexOf("http") == -1) {
        window.open("http://" + path);
      } else {
        window.open(path);
      }
    },
    randomColor() {
      var colorValue = [
        0,
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        "a",
        "b",
        "c",
        "d",
        "e",
        "f",
      ];
      var s = "#";
      for (var i = 0; i < 6; i++) {
        s += colorValue[Math.floor(Math.random() * 16)];
      }
      return s;
    },
    getArticlelist() {
      this.axios
        .get(`/rest/article/art/`, { params: { status: "1" } })
        .then((res) => {
          this.article = res.data.items;
        });
    },
    getDetail(id) {
      this.$router.push(`/detail/${id}`);
    },
  },
};
</script>

<style lang="less" scoped>
.nav {
  margin-top: 80px;
  width: 100%;
  height: 100%;
  padding: 0 20px;
  text-align: center;
  // background: url("./assets/bg.jpg") no-repeat;
  background-origin: content-box;
  background-size: 100% 100%;
}

.content {
  padding: 30px;
}
.bg {
  display: flex;
  position: relative;
  background-color: #fff;
}

.widget {
  background-color: #fff;
  padding: 20px 30px;
  margin-top: 20px;
}

.widget .title {
  margin-top: 0;
  padding-bottom: 7px;
  border-bottom: 1px solid #ebebeb;
  margin-bottom: 21px;
  position: relative;
  cursor: default;
}

.widget .recommend-box {
  .recommend-item {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed #bbb;
    cursor: pointer;
  }

  .recommend-item:hover {
    background-color: aliceblue;
  }

  .friend {
    width: 370px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    .friend-item {
      cursor: pointer;
      flex: 45%;
      text-align: center;
      padding: 10px;
      margin: 5px;
      border-radius: 5px;
      border: 1px solid #ddd;

      .friend-item-name {
        height: 30px;
        line-height: 30px;
        font-size: 18px;
        font-weight: bold;
        border-bottom: 1px solid crimson;
      }
    }

    .friend-item:hover {
      background-color: aliceblue;
    }
  }

  .widget .title:after {
    content: "";
    width: 90px;
    height: 1px;
    background: #f4645f;
    position: absolute;
    left: 0;
    bottom: -1px;
  }
}
.reveal {
  position: relative;
  top: 10%;
  color: #065798;
  font-size: 1.8em;
  font-family: sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  // white-space: pre;
  cursor: default;

  span {
    opacity: 0;
    transform: scale(0);
    animation: fadeIn 2.4s forwards;
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.tap {
  width: 28px;
  height: 28px;
  position: fixed;
  bottom: 80px;
  left: 95%;
  text-align: center;
  line-height: 30px;
  font-size: 22px;
  border-radius: 50%;
  background-color: #bbb;

  a {
    text-decoration: none;
  }
}
.home-article {
  border-top: 1px solid #eee;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
  border-radius: 5px;
  padding: 10px 15px;
  margin-bottom: 20px;

  .home-article-title {
    border-bottom: 1px solid #ccc;
    font-size: 24px;
    padding: 5px;
    margin: 10px 0;
    cursor: pointer;
  }

  .home-article-visit {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding: 0 10px;
  }
}
</style>
